<template>
    <div :id="props.idName"></div>
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
// 引入 Cesium 核心模块和样式
import * as Cesium from 'cesium';
const props = defineProps<{ idName: string; regionSet: Array<any>; pointSet: Array<any> }>();
const viewer = ref<any>(null);

// 初始化地图
const initMap = () => {
    // 初始化地球（容器ID必须与模板一致）
    viewer.value = new Cesium.Viewer(props.idName, {
        // 可选的配置项
        animation: false,        // 隐藏动画控件
        baseLayerPicker: false, // 隐藏图层选择控件
        fullscreenButton: false, // 隐藏全屏按钮
        geocoder: false,       // 隐藏地名查找控件
        homeButton: false,     // 隐藏首页按钮
        navigationHelpButton: false, // 隐藏帮助按钮
        timeline: false,        // 隐藏时间轴
        sceneModePicker: false  // 隐藏场景模式选择控件
    });

    // 关键：隐藏 Cesium logo 容器
    viewer.value.cesiumWidget.creditContainer.style.display = 'none';

    // 创建多边形实体
    viewer.value.entities.add({
        name: "自定义多边形区域",
        polygon: {
            hierarchy: Cesium.Cartesian3.fromDegreesArray(props.regionSet.flat()),
            material: Cesium.Color.BLUE.withAlpha(0.3), // 半透明蓝色
            outline: false,
            outlineColor: Cesium.Color.BLUE,
            outlineWidth: 1,
            height: 0, // 贴地
            extrudedHeight: undefined // 不拉伸高度
        }
    });

    // 设置默认视角，平滑过渡
    viewer.value.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(
            104.89206093039736, // 目标经度（北京）
            37.537514389192424,  // 目标纬度
            10000      // 目标高度（米）
        ),
        duration: 3, // 飞行时长（秒），默认 ~3 秒，可按需调整（如 2/4 秒）
        orientation: {
            // 相机朝向：始终看向目标点正下方（避免飞行中视角偏移）
            heading: Cesium.Math.toRadians(0),    // 水平旋转角度（0 = 正北）
            pitch: Cesium.Math.toRadians(-90),   // 垂直旋转角度（-90 = 正下方）
            roll: Cesium.Math.toRadians(0)       // 倾斜角度（0 = 水平）
        },
        easingFunction: Cesium.EasingFunction.CUBIC_IN_OUT // 缓动函数（平滑加速/减速）
    });
};

watch(() => props.pointSet, (newValue) => {
    if (newValue) {
        // 创建线
        viewer.value.entities.add({
            name: "连接线",
            polyline: {
                positions: Cesium.Cartesian3.fromDegreesArray(props.pointSet.flat()),
                width: 4,
                material: Cesium.Color.WHITE,
                clampToGround: true
            }
        });
        // 创建点
        newValue.forEach((coord, index) => {
            viewer.value.entities.add({
                name: `点 ${index + 1}`,
                position: Cesium.Cartesian3.fromDegrees(coord[0], coord[1]),
                point: {
                    pixelSize: 8,
                    color: Cesium.Color.YELLOW,
                    outlineColor: Cesium.Color.BLACK,
                    outlineWidth: 2
                },
                label: {
                    // text: `点${index + 1}`,
                    font: '14pt sans-serif',
                    fillColor: Cesium.Color.WHITE,
                    outlineColor: Cesium.Color.BLACK,
                    outlineWidth: 2,
                    pixelOffset: new Cesium.Cartesian2(0, -20)
                }
            });
        });
    }
},
    {
        deep: true
    }
)

onMounted(() => {
    initMap()
})
</script>

<style lang="scss" scoped></style>